<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    required: true
  },
  field: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  rules: {
    type: Array,
    default: () => []
  },
  options: {
    type: Object,
    default: () => ({})
  },
  placeholder: String,
  disabled: Boolean,
  clearable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue'])

const data = computed(() => props.options?.data || [])
const valueKey = computed(() => props.options?.valueKey || 'value')
const labelKey = computed(() => props.options?.labelKey || 'label')
</script>

<template>
  <el-form-item :label="label" :rules="rules" :prop="field">
    <el-autocomplete
        :model-value="modelValue"
        @update:modelValue="emit('update:modelValue', $event)"
        :fetch-suggestions="(query, cb) => cb(data.filter(
        item => item[labelKey].toLowerCase().includes(query.toLowerCase())
      ))"
        :placeholder="placeholder"
        :disabled="disabled"
        :clearable="clearable"
        :value-key="labelKey"
    />
  </el-form-item>
</template>
